<template>
	<view class="allser">
		<uni-grid :column="3" :highlight="true" :show-border="false" @change='clickOneSer'>
			<uni-grid-item v-for="(item, index) in growlist" :index="index" :key="item.id">
				<view class="grid-item-box" style="background-color: #fff;">
					<image :src="item.imgUrl" class="image" mode="aspectFill" />
					<text class="text">{{item.serviceName}}</text>
				</view>
			</uni-grid-item>
			
		</uni-grid>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import {getallser} from '../../api/homeApi.js'
import {baseurl} from '../../api/request.js'
import {service} from '@/mock/home.js'

	const growlist = ref([])  //全部服务的列表
	
	//点击服务的每一个小图标
	const clickOneSer= async(evt)=>{
		let index = evt.detail.index
		let item = growlist.value[index]
		
		
			uni.navigateTo({
				url:'/pages/'+item.link
			})
		
	}
	
	
	//获取全部服务
	const getallservice=async()=>{
		let res = await getallser({})
		
		if(res.code==200){

			let lastitem={
				id: 0,
				serviceName:'更多',
				imgUrl:'../../static/allser1.png',
			}  //自己定义最后一个图标的信息 添加到数组中
			growlist.value=res.rows.map(item=>{
				item.imgUrl=baseurl+item.imgUrl
				return item
			})
		}else{
			//静态数据
			growlist.value=service()
		}
		console.log(growlist.value);
	}
	
onMounted(()=>{
	getallservice()
})
</script>

<style lang="scss">
	
	
	.grid-item-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		
			 
	 .image{
	 	width: 80rpx;
	 	height: 80rpx;
		padding-top: 12rpx;
		margin-top: 28px;
	 }
	 .text {
			/* width: 100%;
			 text-align: center; */
			 padding-top: 8rpx; 
			 font-size: 18rpx;
			 white-space: nowrap;
			 overflow: hidden;
			 text-overflow: ellipsis;
	 } 
	}
	
</style>